<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="学号" id="ipCode" />
    <input type="text" placeholder="年龄" id="ipAge" />
    <input type="text" placeholder="性别" id="ipGender" />
    <input type="text" placeholder="专业" id="ipMajor" />
    <button id="btn1">提交</button>
    <button id="btn2">自白</button>
    <hr />
    <p id="pJson">哥的innerText将会放置JSON</p>

    <hr />
    <h3>新增或修改key-value</h3>
    <input type="text" id="ipKey" placeholder="骚年请输入一个key" />
    <input type="text" id="ipValue" placeholder="骚年请输入对应的value" />
    <button id="btn3">更新</button>

    <!-- <script>
      /* 添加基础属性 */
      // 使用input采集用户数据，包含学号、年龄、性别、所学专业等属性信息，
      btn.onclick = function () {
        // 用户点击提交时，创建一个对象obj，完整描述用户信息
        // var code = ipCode.value
        // var age = ipAge.value
        // var gender = ipGender.value
        // var major = ipMajor.value

        var obj = {
          code: ipCode.value,
          age: ipAge.value * 1,
          gender: ipGender.value,
          major: ipMajor.value,
        };

        // 将obj以JSON字符串形式显示在页面上
        var jsonStr = JSON.stringify(obj);
        pJson.innerText = jsonStr;

        /* 添加函数属性 */
        // 为obj包含一个属性selfTell，值为一个函数
        // 在控制台调用obj.selfTell(),将obj的所有属性逐个打印在控制台
        obj.selfTell = function(){
          // 遍历obj的所有键值
          for(var key in obj){
            console.log(key,obj[key]);
          }
        }
        obj.selfTell()

      };
    </script> -->

    <script>
      /* 将obj设置为全局变量 以便所有的函数都能访问 */
      var obj = "伦家还没有正式的值呢(╥╯^╰╥)"; //undefined

      /* 所有的input框 */
      var arr = [ipCode, ipAge, ipGender, ipMajor, ipKey, ipValue];

      /* 清空所有的input框 */
      var clearInputs = function () {
        for (var i = 0; i < arr.length; i++) {
          arr[i].value = "";
        }
      };

      /* 将全局变量obj转为一个JSON字符串 丢在p标签上进行显式 */
      function updateJson() {
        var jsonStr = JSON.stringify(obj);
        pJson.innerText = jsonStr;

        // 更新完毕后无情清除所有的input框
        clearInputs();
      }

      btn1.onclick = function () {
        /* 从固定的input框中取出用户的输入 丢于obj的对应key */
        obj = {
          code: ipCode.value,
          age: ipAge.value * 1, //年龄转化为number
          gender: ipGender.value,
          major: ipMajor.value,
        };

        // 更新p标签中的JSON显式
        updateJson();

        // 给obj添加selfTell方法/函数
        obj.selfTell = function () {
          // 遍历obj的所有键值 进行输出
          for (var key in obj) {
            console.log(key, obj[key]);
          }
        };

        // 立即调用之
        obj.selfTell();
      };

      /* 点击btn2让obj进行自我介绍 */
      btn2.onclick = function () {
        /* obj存在 且 obj.selfTell存在 且 obj.selfTell是一个函数 */
        if (obj && obj.selfTell && typeof obj.selfTell === "function") {
          obj.selfTell();
        } 
        
        else {
          alert("请先到班长处购买IQ卡再回来调用");
        }
        
      };

      /* 自定义obj属性名和属性值 */
      // 左边input输入hobby(爱好)，右边input输入篮球，则自动为obj添加一个hobby属性值为篮球
      // 左边input输入home(家乡)，右边input输入广东，则自动为obj添加一个home属性值为广东
      // 点击“更新”按钮，页面以JSON形式实时显示最新的obj信息
      btn3.onclick = function () {
        // 取出用户输入的任意key
        var key = ipKey.value;

        // 取出用户输入的任意value
        var value = ipValue.value;

        // 如果key业已存在 则更新之 否则新增一个key-value
        obj[key] = value;

        // 更新JSON信息在P标签上
        updateJson();
      };
    </script>
  </body>
</html>
